<template>
  <div class="main">
    <div class="header">
      <HeaderBack>{{ data.title }}</HeaderBack>
    </div>
    <div class="content">
      <template v-if="data.rule_context">
        <div class="bbs_title">{{ data.title }}</div>
        <div class="bbs_author flex-box">
          <img class="photo" :src="data.author.photo" alt>
          <div class="info flex">
            <div>{{ data.author.nickname }}</div>
            <div class="create_time">{{ data.create_time }}</div>
          </div>
          <div class="btn btn-fill care">加关注</div>
        </div>
        <div class="bbs_context" v-html="data.rule_context"></div>
        <div class="bbs_reply">
          <div class="title">全部评论 0 条</div>
          <div v-for="(item, index) in reply" :key="index">
          <div class="reply_item">
            <div class="author flex-box">
              <div>
                <img class="photo" :src="item.author.photo" alt>
                {{ item.author.nickname }}
              </div>
              <div class="create_time">{{ item.create_time }}</div>
            </div>
            <div class="reply_context" v-html="item.parse_context"></div>
          </div>
          <line-hr class="t_hr"></line-hr>
          </div>
        </div>
      </template>
      <div v-else class="empty_tips">内容正在路上...</div>
    </div>
    <div class="footer">
      <div class="input_box">
        <div class="icon-svg input_face" v-on:click="showFaceBox"></div>
        <input v-model="reply_context" placeholder="说点什么" class="input flex" type="text">
        <button class="btn btn_reply" @click="replyForum">回复</button>
      </div>
      <div class="chat-face-box transition" :style="{height: height}">
        <div class="face-box" ref="faceBox">
          <span v-for="(img, index) of face" :key="index" class="face-out">
            <img :src="'/static/images/face/' + img.src" alt="img" v-on:click="addFacs(img.name)">
          </span>
        </div>
      </div>
    </div>
    <Tips ref="tips"></Tips>
  </div>
</template>

<script>
import HeaderBack from "@/components/common/HeaderBack.vue";
import Tips from "@/components/common/Tips.vue";

export default {
  data() {
    return {
      id: 0,
      data: {},
      reply: [],
      reply_context: "",
      height: "0px",
      face: [
        { name: "爱你", src: "aini.gif" },
        { name: "抱抱", src: "baobao.gif" },
        { name: "不活了", src: "buhuole.gif" },
        { name: "不要", src: "buyao.gif" },
        { name: "超人", src: "chaoren.gif" },
        { name: "大哭", src: "daku.gif" },
        { name: "嗯嗯", src: "enen.gif" },
        { name: "发呆", src: "fadai.gif" },
        { name: "飞呀", src: "feiya.gif" },
        { name: "奋斗", src: "fendou.gif" },
        { name: "尴尬", src: "ganga.gif" },
        { name: "感动", src: "gandong.gif" },
        { name: "害羞", src: "haixiu.gif" },
        { name: "嘿咻", src: "heixiu.gif" },
        { name: "画圈圈", src: "huaquanquan.gif" },
        { name: "惊吓", src: "jinxia.gif" },
        { name: "敬礼", src: "jingli.gif" },
        { name: "快跑", src: "kuaipao.gif" },
        { name: "路过", src: "luguo.gif" },
        { name: "抢劫", src: "qiangjie.gif" },
        { name: "杀气", src: "shaqi.gif" },
        { name: "上吊", src: "shangdiao.gif" },
        { name: "调戏", src: "tiaoxi.gif" },
        { name: "跳舞", src: "tiaowu.gif" },
        { name: "万岁", src: "wanshui.gif" },
        { name: "我走了", src: "wozoule.gif" },
        { name: "喜欢", src: "xihuan.gif" },
        { name: "吓死人", src: "xiasiren.gif" },
        { name: "嚣张", src: "xiaozhang.gif" },
        { name: "疑问", src: "yiwen.gif" },
        { name: "做操", src: "zuocao.gif" }
      ]
    };
  },
  components: {
    HeaderBack,
    Tips
  },
  methods: {
    replyForum() {
      // let id = this.$route.query.id;
      // this.reply_context;
      this.$axios
        .post("/api/index/bbs/reply", {
          id: this.id,
          context: this.reply_context
        })
        .then(res => {
          this.$refs.tips.show(res.data.msg);
          this.loadReply();
          // this.data = res.data;
        });
      this.reply_context = "";
    },
    showFaceBox() {
      this.height =
        this.height == "0px" ? this.$refs.faceBox.offsetHeight + "px" : "0px";
      console.log(this.height);
    },
    addFacs(img) {
      this.reply_context += "[表情:" + img + "]";
    },
    loading() {
      let id = this.id;
      this.$axios
        .get("/api/index/bbs/view", {
          params: { id }
        })
        .then(res => {
          this.data = res.data;
        });
      this.loadReply();
    },
    loadReply() {
      this.$axios
        .get("/api/index/bbs/replyList", {
          params: { forum_id: this.id }
        })
        .then(res => {
          // console.log(res.data.data);
          this.$set(this, 'reply', res.data.data);
          // this.reply = res.data.data;
        });
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.loading();
  },
  activated() {
    if (this.id != this.$route.query.id) {
      this.id = this.$route.query.id;
      this.data = {};
      this.loading();
    }
  }
};
</script>

<style scoped lang="less">
.empty_tips {
  margin-top: 2rem;
  text-align: center;
  font-size: 1.4rem;
  color: #aaa;
}
.bbs_title {
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  border-bottom: 1px solid #eee;
}
.bbs_author {
  padding: 0.75rem;
  padding-bottom: 0;
  align-items: center;
  .photo {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    margin-right: 0.5rem;
    background: #eee;
  }
  .info {
    line-height: 1rem;
  }
  .create_time {
    color: #aaa;
    font-size: 0.6rem;
  }
}
.bbs_reply {
  .title {
    padding: 0.75rem;
    font-size: 1rem;
    color: #999;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
  }
  .reply_item {
    padding: 0.5rem 0.75rem;
  }
  .t_hr {
    margin-left: 1rem;
  }
  .author {
    justify-content: space-between;
    align-items: center;
    color: #666;
    margin-bottom: .25rem;
    .photo {
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      vertical-align: middle;
      margin-top: -0.25rem;
      margin-right: 0.25rem;
      background: #eee;
      box-shadow: 0 0.05rem 0.1rem #32393e;
    }
    .create_time {
      color: #aaa;
      font-size: 0.6rem;
    }
  }
}
.chat-face-box {
  overflow: hidden;
}
.face-box {
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  .face-out {
    width: 12.5%;
    text-align: center;
    img {
      width: 1.5rem;
      height: 1.5rem;
    }
  }
}
.transition {
  transition: all 0.2s ease;
}
.input_box {
  display: flex;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid #eee;
  input {
    margin-right: 0.25rem;
  }
  .input_face {
    margin-right: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(../../assets/svg/face.svg);
  }
}
</style>
<style lang="less">
.bbs_context {
  font-size: 0.85rem;
  padding: 0.75rem;
  img {
    max-width: 100%;
  }
}
.face-chat {
  width: 1.5rem;
    height: 1.5rem;
}
</style>
